<template>
	<el-dialog
		:title="$t('merchant.verify_look')"
		:visible.sync="dialogVisible"
		width="1100px"
	>
		<el-form :inline="true" :model="formInline" class="demo-form-inline">
			<el-form-item :label="$t('merchant.phone_num')">
				<el-input
					v-model.trim="formInline.phoneNo"
					:maxlength="4"
					:placeholder="$t('merchant.check_length_4')"
					clearable
				></el-input>
			</el-form-item>
			<el-form-item :label="$t('merchant.send_time')">
				<el-date-picker
					v-model="searchTime"
					:default-time="defaultTime"
					:end-placeholder="$t('merchant.end_time')"
					:picker-options="pickerShortcut2"
					:start-placeholder="$t('merchant.start_time')"
					align="right"
					format="yyyy-MM-dd HH:mm:ss"
					range-separator="-"
					size="medium"
					type="datetimerange"
				></el-date-picker>
			</el-form-item>
			<el-form-item>
				<el-button :loading="loading" type="primary" @click="search">
					{{ $t('common.search') }}
				</el-button>
				<el-button :loading="loading" @click="reset">
					{{ $t('common.reset') }}
				</el-button>
			</el-form-item>
		</el-form>
		<div>
			<el-table
				v-loading="loading"
				:data="dataList"
				border
				size="mini"
				style="width: 100%"
			>
				<el-table-column
					:label="$t('merchant.message_channel')"
					align="center"
					prop="channelName"
				>
					<template slot-scope="scope">
						{{ scope.row.channelName || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					:label="$t('merchant.phone_num')"
					align="center"
					prop="phoneNo"
				>
					<template slot-scope="scope">
						{{ scope.row.phoneNo || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					prop="smsContent"
					align="center"
					:label="$t('merchant.content')"
				>
					<template slot-scope="scope">
						{{ scope.row.smsContent || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					align="center"
					:label="$t('merchant.send_time')"
					prop="createdAt"
				>
					<template slot-scope="scope">
						{{ scope.row.createdAt || '-' }}
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页 -->
			<el-pagination
				style="display: flex;justify-content: flex-end;margin-top: 24px;"
				:current-page.sync="pageNum"
				:page-size="pageSize"
				:page-sizes="pageSizes"
				:total="total"
				background
				layout="total, sizes,prev, pager, next, jumper"
				@current-change="handleCurrentChange"
				@size-change="handleSizeChange"
			></el-pagination>
		</div>
	</el-dialog>
</template>

<script>
import list from '@/mixins/list'
import dayjs from 'dayjs'
import { querySmsRecordApi } from '@/api/merchant/merchant-config/sms-config'

const end = dayjs()
	.endOf('day')
	.valueOf()
const start = dayjs()
	.startOf('day')
	.valueOf()
export default {
	name: 'IdentifyCode',
	mixins: [list],
	data() {
		return {
			dialogVisible: false,
			searchTime: [start, end],
			pageSizes: [10, 20, 50, 100, 200],
			loading: false,
			merchantId: '',
			formInline: {
				endTime: '',
				phoneNo: '',
				startTime: ''
			},
			dataList: []
		}
	},
	watch: {
		dialogVisible(nVal) {
			if (nVal) {
				this.getSmsRecordsList(this.formInline)
			}
		}
	},
	methods: {
		search() {
			this.pageNum = 1
			this.getSmsRecordsList()
		},
		async getSmsRecordsList() {
			let params = {
				...this.formInline,
				merchantId: this.merchantId,
				startTime: dayjs(this.searchTime[0]).format(
					'YYYY-MM-DD HH:mm:ss'
				),
				endTime: dayjs(this.searchTime[1]).format('YYYY-MM-DD HH:mm:ss')
			}
			params = {
				...this.getParams(params)
			}

			try {
				this.loading = true
				const { data } = await querySmsRecordApi(params)
				this.dataList = data?.record
				this.total = (data && data.totalRecord) || 0
				this.loading = false
			} catch (e) {
				this.loading = false
			}
		},
		reset() {
			this.formInline = {}
			this.pageNum = 1
			this.searchTime = [start, end]
			this.search()
		},
		handleCurrentChange() {
			this.getSmsRecordsList()
		},
		handleSizeChange(val) {
			this.pageSize = val
			this.pageNum = 1
			this.getSmsRecordsList()
		}
	}
}
</script>

<style scoped></style>
